// pages/component/signature/signature.js
var cxt = null;// 使用 wx.createContext 获取绘图上下文 cxt
var arrx = [];//所有点的X轴集合
var arry = [];//所有点的Y轴集合
var canvasw = 0;//画布的宽 
var canvash = 0;//画布的高
// var canvasTop=0;
// var canvasLeft=0;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    can:Boolean,//用于显示隐藏canvas
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    src:""
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    //显示隐藏组件
    back(){
        //子组件传递给父组件一个方法canvasDis，并传递一个参数src给父组件
      this.triggerEvent("canvasDis",{src:this.data.src})
    },
    //创建canvas上下文
    createdCanvas(){
      wx.showLoading({
        title: '加载中...',
        mask: true
      })
      // 使用 wx.createContext 获取绘图上下文 cxt
      //创建 canvas 的绘图上下文,因为这里是封装成组件，所有需要加this
      cxt = wx.createCanvasContext('canvas',this);
      cxt.beginPath();
      //封装成组件，所有需要in(this),如果不加无法创建画布
      var query = wx.createSelectorQuery().in(this).select('.handCenter');
      query.boundingClientRect(rect => {
        // canvasTop = rect.top;
        // canvasLeft = rect.left;
        canvasw = rect.width;
        canvash = rect.height;
        wx.hideLoading()
      }).exec();
    },
    //canvas发生错误时触发
    canvasIdErrorCallback(e){
      console.error(e.detail.errMsg)
    },
    //canvas触摸开始
    canvasStart(e){
      arrx.push(e.changedTouches[0].x);
      arry.push(e.changedTouches[0].y);
    },
    //canvas触摸过程中
    canvasMove(e){
      let len = arrx.length;
      cxt.moveTo(arrx[len - 1], arry[len - 1]);//把路径移动到画布中指定的点,第一个参数为x轴，第二个参数为y轴
      arrx.push(e.changedTouches[0].x);//手指移动过程中canvas的横坐标存入到全局数组变量arrx中
      arry.push(e.changedTouches[0].y);//手指移动过程中canvas的纵坐标存入到全局数组变量arry中
      cxt.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);//moveTo坐标到lineTo坐标的
      cxt.setLineWidth(4);//设置线条的宽度
      cxt.setLineCap('round');//设置结束时 点的样式
      cxt.stroke();//画线
      cxt.draw(true);//设置为true时，会保留上一次画出的图像，false则会清空(方式二设置为false,一为true)
    },
    getimg() {
      if (arrx.length == 0) {
        wx.showModal({
          title: '提示',
          content: '签名内容不能为空！',
          showCancel: false
        });
        return false;
      };
      wx.showLoading({
        title: '签名生成中..',
        mask:true
      })
      let that = this;
      wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: function (res) {
          that.setData({
            src: res.tempFilePath
          })
          wx.hideLoading();
          //子组件传递给父组件一个方法canvasDis，并传递一个参数src给父组件
          that.triggerEvent("canvasDis",{src:res.tempFilePath})
        }
      },this)
    },
    cleardraw() {
      //清除画布
      arrx = [];
      arry = [];
      cxt.clearRect(0, 0, canvasw, canvash);
      cxt.draw();
      this.setData({src:''});
    },
    canvasEnd(e){}
  },
  ready(){
    this.createdCanvas()
  }
})